<script setup lang="ts">
import type { IDictionary } from '@/anyThing/interface/IDictionary'

import { Search } from 'lucide-vue-next'

defineProps<{
  /** # 选项数据 */
  options: IDictionary[]
  /** # 是否多选 */
  multiple?: boolean
  /** # 占位符 */
  placeholder?: string
}>()

const filterValue = ref('')

const selTags = ref<string[]>([])
</script>

<template>
  <Popover>
    <PopoverTrigger>
      <TagsInput v-model="selTags">
        <TagsInputItem
          v-for="item in selTags"
          :key="item"
          :value="item"
          @click.stop
        >
          <TagsInputItemText />
          <TagsInputItemDelete />
        </TagsInputItem>
        <TagsInputInput :placeholder="placeholder" />
      </TagsInput>
    </PopoverTrigger>
    <PopoverContent>
      <div class="flex relative">
        <Search class=" absolute left-2 top-1/2 transform -translate-y-1/2 " :size="16" />
        <Input v-model="filterValue" class="pl-10" />
      </div>
      <div>
        xx
      </div>
    </PopoverContent>
  </Popover>
</template>
